<{if $data.associate == 'true'}>
<{script src="coms/autocompleter.js" app='desktop'}>
<style>
	ul.autocompleter-choices { position:absolute;list-style:none; margin:0; border:1px solid #7c7c7c; border-color:#7c7c7c #c3c3c3 #dddddd #c3c3c3; background-color:#fff; text-align:left; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; z-index:65535;overflow:hidden;}
	ul.autocompleter-choices li { position:relative; margin:-2px 0 0 0; padding:0.2em 1.5em 0.2em 1em; display:block; float:none !important; cursor:pointer; font-weight:normal; white-space:nowrap; font-size:1em; line-height:1.5em; }
	ul.autocompleter-choices li.autocompleter-selected { background-color:#444; color:#fff; }
	ul.autocompleter-choices span.autocompleter-queried { display:inline; float:none; font-weight:bold; margin:0; padding:0; }
	ul.autocompleter-choices li.autocompleter-selected span.autocompleter-queried { color:#9FCFFF; }
</style>
<{/if}>
<form action="<{link app=b2c ctl=site_search act=result }>" method="post" class="SearchBar  searchBar_<{$widget_id}>">
  <table cellpadding="0" cellspacing="0">
    <tr>
      <td class="search_label"><input type="text" name="name[]" value="<{$data.search_key}>" autocompleter="associate_autocomplete_goods:name,goods_id" ac_options="{}" class="inputstyle keywords"  /></td>
      <{if $setting.searchopen}>
      <td class="search_price1"><{t app='b2c'}>价格从<{/t}> <{input name="price[0]" type="number" size="4" class="inputstyle gprice_from" }></td>
      <td class="search_price2"><{t app='b2c'}>到<{/t}><{input name="price[1]" type="number" size="4" class="inputstyle gprice_to"}></td>
      <{/if}>
      <td><input type="submit" value="" class="btn_search" onfocus='this.blur();' style="_margin:-1px 0 0 0"/></td>
    </tr>
  </table>

</form>
<{if $data.associate == 'true'}>
<script>
(function(scope){

	if(scope)
	$(scope).getElements('input[autocompleter]').each(function(item) {
                 item.setAttribute('autocomplete','off');
                 var params = item.get('autocompleter');
                 var callUrl = '<{link app=associate ctl=site_associate act=index}>?param='+params;

                 var _getVar = params.match(/:([^,]*)/)[1];


               // item.addEvent('keydown', function(e) {if (e.code == 13)e.stop();});
                var _base_options = {
                     getVar: _getVar,
                     fxOptions: false,
					 selectFirst:false,
					 autoSubmit:true,
					 onSubmit:function(){
						item.getParent('form').submit();
					 },
                     delay: 300,
                     callJSON: function() {return window.autocompleter_json;},
                     injectChoice: function(json) {
                         var token = json[this.options.getVar];
                         var choice = new Element('li', {'html': this.markQueryValue(token)});
                         choice.inputValue = token;
                         this.addChoiceEvents(choice).inject(this.choices);
                     }
                };
                var ac_options = {};
                try {
                    ac_options = JSON.decode(item.get('ac_options'));
                    Object.append(ac_options, item.retrieve('ac_options', {}));
                }catch (e) {}

                var _options = Object.merge(_base_options, ac_options);

                new Autocompleter.script(item, callUrl, _options);

       });


})(document.getElement('.searchBar_<{$widget_id}>'));
</script>
<{/if}>